﻿<template>
    <div class="ad-content">
        <div class="ad-tree" style="flex:0 0 350px !important">
            <div class="ad-title">
                <span>组织架构</span>
            </div>
            <div class="ad-treebody">
                <adp-tree ref="orgTree" node-key="OrganizationCode" node-expanded-key="Paths" @click="treeclick" @load="treeload"></adp-tree>
            </div>
        </div>
        <div class="ad-main">
            <div class="ad-console-top">
                <div class="ad-console-top-name">{{Fullname}}</div>
                <div class="ad-console-top-body">
                </div>
                <div class="ad-console-top-end">
                </div>
            </div>
            <div class="ad-console-body">
                <div class="ad-console-toolbar">
                    <el-button type="primary" size="mini" icon="icon-cog4 el-icon--left" @click="showRole">设置权限</el-button>
                    <el-button type="primary" size="mini" icon="icon-refresh2 el-icon--left" @click="setState(1)">开通</el-button>
                    <el-button type="primary" size="mini" icon="icon-refresh2 el-icon--left" @click="openDialog">调动</el-button>
                    <el-button type="primary" size="mini" icon="icon-refresh2 el-icon--left" @click="setState(2)">停用</el-button>
                    <el-button type="primary" size="mini" icon="icon-refresh2 el-icon--left" @click="del">删除</el-button>

                    <!--<el-button type="primary" size="mini" icon="icon-refresh2 el-icon--left" @click="refresh">刷新节点</el-button>
    <el-button type="primary" size="mini" icon="icon-refresh2 el-icon--left" @click="UpdateUser">更新用户</el-button>
    <el-button type="primary" size="mini" icon="el-icon-picture-outline el-icon--left" @click="updateAvatar">更新头像</el-button>-->
                    <el-dropdown @command="handleCommand">
                        <el-button type="primary" size="mini" icon="el-icon-more el-icon--left">
                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item icon="el-icon-delete el-icon--left" command="1">刷新节点</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-video-play el-icon--left" divided command="2">更新用户</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-video-pause el-icon--left" divided command="3">更新头像</el-dropdown-item>
                            <!--<el-dropdown-item icon="el-icon-delete el-icon--left" command="1">删除</el-dropdown-item>
            <el-dropdown-item icon="el-icon-video-play el-icon--left" divided command="2">开通</el-dropdown-item>
            <el-dropdown-item icon="el-icon-video-pause el-icon--left" divided command="3">停用</el-dropdown-item>
            <el-dropdown-item icon="el-icon-s-promotion el-icon--left" divided command="4">调动</el-dropdown-item>-->
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div style="float:right">
                        <el-select v-model="updateUnit" placeholder="是否调动" style="width:120px;" clearable size="mini">
                            <el-option v-for="item in updateUnits" :key="item.value" :label="item.name" :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select v-model="searchRole" placeholder="角色" style="width:120px;" clearable size="mini">
                            <el-option v-for="item in rls" :key="item.value" :label="item.name" :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select v-model="searchPermit" placeholder="权限" style="width:120px;" clearable size="mini">
                            <el-option v-for="item in permits" :key="item.value" :label="item.name" :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input v-model="searchkey" prefix-icon="el-icon-search" placeholder="姓名" @keyup.enter.native="search()" style="width:130px;" size="mini"></el-input>
                        <el-button type="primary" size="mini" @click="search(true)" style="padding: 7px 10px;">搜索</el-button>
                    </div>
                </div>
                <el-card class="box-card" style="width:100%;">
                    <el-table ref="tbl" size="mini" :data="plist" border style="width: 100%" @selection-change="handleSelectionChange" @sort-change="handleSortChange">
                        <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
                        <el-table-column type="selection" width="50" align="center"></el-table-column>
                        <el-table-column prop="employeeName" width="100" label="姓名" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" @click="getaccount(scope.row)" :style="scope.row.Role=='未设置'?'color: #ccc':'color: #000'">
                                    {{scope.row.employeeName}}
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="empJobLevelName" width="150" label="职级" align="center">
                            <template slot-scope="scope">
                                <div style="color: #ccc" v-if="scope.row.Role=='未设置'">{{scope.row.empJobLevelName}}</div>
                                <div v-else>{{scope.row.empJobLevelName}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="OrganizationName" label="单位/部门" header-align="center">
                            <template slot-scope="scope">
                                <div style="color: #ccc" v-if="scope.row.Role=='未设置'">{{scope.row.OrganizationName}}</div>
                                <div v-else>{{scope.row.OrganizationName}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="UnitCode" label="当前单位" width="150" align="center">
                        </el-table-column>
                        <el-table-column prop="Status" label="状态" width="100" align="center">
                            <template slot-scope="scope">
                                <div style="color: red" v-if="scope.row.Status=='1'">使用中</div>
                                <div style="color: #ccc" v-if="scope.row.Status=='2'">已停用</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Role" label="角色" width="150" align="center">
                            <template slot-scope="scope">
                                <div style="color: #ccc" v-if="scope.row.Role=='未设置'">{{scope.row.Role}}</div>
                                <div v-else>{{scope.row.Role}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Permit" label="权限" width="150" align="center">
                            <template slot-scope="scope">
                                <div style="color: #ccc" v-if="scope.row.Permit=='未设置'">{{scope.row.Permit}}</div>
                                <div v-else>{{scope.row.Permit}}</div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <br />
                    <div style="text-align:center"><el-pagination v-if="totalcount>0" background layout="total, sizes, prev, pager, next, jumper" :total="totalcount" :current-page="currentpage" @current-change="pagerclick" @size-change="sizechange" :page-size="pagesize" :page-sizes="[10, 20, 30, 40,50,100,200]"></el-pagination></div>
                </el-card>
            </div>
        </div>
        <el-dialog title="设置用户权限" :visible.sync="roleshow" v-dialogDrag :close-on-click-modal="false" class="dtnone dbnone" width="500px" @close="roleshow=false">
            <el-form label-position="top">
                <el-form-item label-width="0px">
                    <el-col :span="24">
                        <el-form-item label="关联秘书">
                            <el-select v-model="clerkArray" multiple placeholder="请选择">
                                <el-option v-for="item in clerkList"
                                           :key="item.value"
                                           :label="item.name"
                                           :value="item.value">
                                </el-option>
                            </el-select>

                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label-width="0px">
                    <el-col :span="24">
                        <el-form-item label="主要角色">
                            <el-checkbox-group v-model="rolelist">
                                <el-checkbox v-for="item in roles" :label="Number(item.value)">{{item.name}}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label-width="0px">
                    <el-col :span="24">
                        <el-form-item label="附加角色">
                            <el-checkbox-group v-model="rolelist">
                                <el-checkbox v-for="item in aroles" :label="Number(item.value)">{{item.name}}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label-width="0px">
                    <el-col :span="24">
                        <el-form-item label="角色权限">
                            <el-checkbox-group v-model="permitlist">
                                <el-checkbox v-for="item in permits" :label="item.value">{{item.name}}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label-width="0px">
                    <el-button type="primary" @click="setRole" size="small" style="width:100%">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="用户账号" :visible.sync="accountshow" :close-on-click-modal="false" class="dtnone dbnone" width="500px" @close="accountshow=false">
            <el-form label-position="top" :model="form">
                <el-form-item label-width="0px">
                    <el-col :span="24">
                        <el-form-item label="temp" prop="Name">
                            <span slot="label">姓<span style="margin-left:24px;">&nbsp;</span>名</span>
                            <el-input v-model="form.Name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label-width="0px">
                    <el-col :span="24">
                        <el-form-item label="用户Code" prop="Code">
                            <el-input v-model="form.Code"><el-button slot="append" icon="el-icon-right" @click="back(form.Code)"></el-button></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label-width="0px">
                    <el-col :span="24">
                        <el-form-item label="用户账号" prop="accountId">
                            <el-input v-model="form.accountId"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label-width="0px">
                    <el-col :span="24">
                        <el-form-item label="账号Code" prop="accountCode">
                            <el-input v-model="form.accountCode"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label-width="0px" style="margin-top:20px;">
                    <el-button type="primary" @click="accountshow=false" size="small" style="width:100%">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="选择调动单位" class="dialog dlg" v-dialogDrag :visible="showDialog" width="450px" @close="closeDialog()">
            <el-form :model="form" ref="form" label-width="85px">
                <el-form-item label-width="0px" style="margin-bottom:10px;">
                    <el-col :span="24">
                        <el-input v-model="key" prefix-icon="el-icon-search" placeholder="单位名称" @input="find()" style="width:390px;" size="mini"></el-input>
                        <div style="height:400px;overflow:auto" class="demo-block">
                            <el-tree ref="tree" :data="treeData" node-key="ID" show-checkbox :props="props" check-strictly :default-checked-keys="keys" :load="deptload" @check="checkNode" lazy v-if="ShowTree">
                            </el-tree>
                        </div>
                    </el-col>
                </el-form-item>
                <el-button type="primary" size="medium" @click="setDept">提交</el-button>
                <el-button size="medium" @click="closeDialog()">关闭</el-button>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                totalcount: 0,
                currentpage: 1,
                pagesize: 10,
                roles: [],
                aroles: [],
                rls: [],
                updateUnits: [{ "name": "是", "value": "1" }, { "name": "否", "value": "0" }],
                permits: [],
                clerkList: [],
                clerkArray:[],
                rolelist: [],
                permitlist: [],
                roleshow: false,
                accountshow: false,
                showDialog: false,
                OrganizationCode: '',
                IsLoad: true,
                ShowTree: true,
                props: {
                    label: 'label',
                    isLeaf: 'isLeaf'
                },
                DeptID: '',
                Employees: [],
                Fullname: '',
                level: 0,
                plist: [],
                form: {
                    Name: "",
                    Code: "",
                    accountId: "",
                    accountCode: ""
                },
                searchRole: '',
                searchPermit: '',
                key: '',
                searchkey: '',
                updateUnit: '',
                treeData:[]
            }
        },
        mounted() {
            App.Page.init(this);
            this.loadRoles();
            this.loadPermits();
            this.loadClerk();
        },
        methods: {
            loadRoles() {
                App.Service.post("/plus/Yqd/Department/GetRoleList", {}).then((res) => {
                    if (res.success) {
                        this.roles = res.roles;
                        this.aroles = res.aroles;
                        this.rls = this.roles.concat(this.aroles);
                    }
                });
            },
            loadPermits() {
                App.Service.post("/plus/Yqd/Department/GetPermitList", {}).then((res) => {
                    if (res.success) {
                        this.permits = res.data;
                    }
                });
            },
            loadClerk() {
                App.Service.post("/plus/Yqd/Department/GetClerkList", {}).then((res) => {
                    if (res.success) {
                        this.clerkList = res.data;
                    }
                });
            },
            treeclick(node, hit) {
                this.level = node.level;
                this.OrganizationCode = node.data.OrganizationCode;
                this.Fullname = node.data.Fullname;
                this.load(true);
            },
            treeload(node, resolve) {
                var param = {
                    ParentCode: "",
                    Paths: "",
                    Fullname: ""
                }
                if (node && node.parent) {
                    param = {
                        ParentCode: node.data.OrganizationCode,
                        Paths: node.data.Paths,
                        Fullname: node.data.Fullname
                    }
                }
                App.Service.post("/plus/Yqd/Department/GetList", param).then((res) => {
                    if (res.success) {
                        resolve(res.data);
                    }
                });
            },
            load(bl) {
                //this.searchRole = '';
                //this.searchkey = '';
                //this.searchPermit = '';
                //this.updateUnit = '';
                //this.IsLoad = true;
                if (bl) this.currentpage = 1;
                var op = this.level < 4 ? "SearchUserList" : "GetUserList";
                App.Service.post("/plus/Yqd/Department/" + op, {
                    start: this.currentpage,
                    limit: this.pagesize,
                    OrganizationCode: this.OrganizationCode,
                    Level: this.level,
                    role: this.searchRole,
                    permit: this.searchPermit,
                    key: this.searchkey,
                    Fullname: this.Fullname,
                    isUpdateUnit: this.updateUnit
                }).then((res) => {
                    if (res.success) {
                        this.totalcount = res.totalcount;
                        this.plist = res.data;
                    }
                });
            },
            handleSelectionChange(val) {
                this.Employees = val;
            },
            handleCommand(command) {
                switch (command) {
                    case "1":
                        this.refresh();
                        break;
                    case "2":
                        this.UpdateUser();
                        break;
                    case "3":
                        this.updateAvatar();
                        break;
                    
                    //case "2":
                    //    this.setState(1);
                    //    break;
                    //case "3":
                    //    this.setState(2);
                    //    break;
                    //case "4":
                    //    this.openDialog();
                    //    break;
                }
            },
            openDialog() {
                if (this.Employees.length == 0) return;
                this.showDialog = true;
            },
            closeDialog() {
                this.showDialog = false;
            },
            deptload(node, resolve) {
                if (resolve == null) {
                    var param = {
                        ParentCode: "",
                        Paths: "",
                        Fullname: "",
                        key: this.key
                    }
                } else {

                    this.resolve = resolve;
                    var param = {
                        ParentCode: "",
                        Paths: "",
                        Fullname: "",
                        key: this.key
                    }
                    if (node && node.parent) {
                        param = {
                            ParentCode: node.data.OrganizationCode,
                            Paths: node.data.Paths,
                            Fullname: node.data.Fullname,
                            key: this.key
                        }
                    }
                }
                App.Service.post("/plus/Yqd/Department/GetList", param).then((res) => {
                    if (res.success) {
                        resolve(res.data);
                        this.ShowTree = true;
                        this.treeData = res.data;
                    }
                });

                //if (node == null || !node.data) {
                //    App.Service.post("/plus/Yqd/Department/GetList", { key: this.key }).then((res) => {
                //        if (res.success) {
                //            resolve(res.data);
                //            this.ShowTree = true;
                //        }
                //    });
                //}
            },
            find() {
                this.ShowTree = false;
                this.deptload(null, this.resolve);
            },
            checkNode: function (a, b) {
                if (b.checkedKeys.length > 0) {
                    this.DeptID = a.ID;
                    this.$refs.tree.setCheckedKeys([a.ID]);
                }
            },
            setDept() {
                if (this.Employees.length == 0) return;
                if (this.DeptID == '') {
                    App.Msg.error('请选择要调动的单位！');
                    return;
                }
                var codes = this.Employees.map((it) => { return it.employeeCode });
                App.Service.post("/plus/Yqd/Department/UpdateDept", {
                    DeptID: this.DeptID,
                    empCode: codes
                }).then((res) => {
                    if (res.success) {
                        this.Employees = null;
                        this.DeptID = '';
                        this.closeDialog();
                        this.load();
                        this.treeData = [];
                        this.deptload(null, this.resolve);
                    }
                });
            },
            setRole() {
                var Employees = JSON.stringify(this.Employees);
                var role = this.rolelist.join(',');
                var permit = this.permitlist.join(',');
                var clerk = this.clerkArray.join(",");
                if (role.length == 0) {
                    App.Msg.error("请选择角色!");
                    return;
                }
                App.Service.post("/plus/Yqd/Department/SetRole", {
                    Employees: Employees,
                    Role: role,
                    PermitItem: permit,
                    relationEmployeeCode: clerk
                }).then((res) => {
                    if (res.success) {
                        this.roleshow = false;
                        this.load();
                    }
                });
            },
            showRole() {
                if (this.Employees.length == 0) {
                    App.Msg.error("请选择人员!");
                    return;
                }
                this.clerkArray = [];
                this.role = '';
                this.roleshow = true;
                if (this.Employees.length > 0) {
                    this.rolelist = this.Employees[0].RoleCode;
                    this.permitlist = this.Employees[0].PermitCode;
                    console.log(this.Employees[0]);
                    if (this.Employees[0].RealtionEmployeeCode.length > 0) {
                        this.clerkArray = this.Employees[0].RealtionEmployeeCode.split(',');
                    }
                }
            },
            getaccount(row) {
                App.Service.post("/plus/Yqd/Department/GetAccount", {
                    employeeCode: row.employeeCode
                }).then((res) => {
                    if (res.success) {
                        this.form.Code = row.employeeCode;
                        this.form.Name = row.employeeName;
                        this.form.accountCode = res.accountCode;
                        this.form.accountId = res.accountId;
                        this.accountshow = true;
                    }
                });
            },
            back(code) {
                App.Service.post("/plus/yqd/WxUser/Login", {
                    EmployeeCode: code
                }).then((res) => {
                    if (res.success) {
                        window.open(res.url, "_blank");
                    }
                });
            },
            setState(index) {
                if (this.Employees.length == 0) {
                    App.Msg.error("请选择人员!");
                    return;
                }
                var Employees = this.Employees.map(row => row.employeeCode);
                App.Service.post("/plus/Yqd/Department/SetState", {
                    Employees: Employees,
                    state: index
                }).then((res) => {
                    if (res.success) {
                        this.load();
                    }
                });
            },
            del() {
                if (this.Employees.length == 0) {
                    App.Msg.error("请选择人员!");
                    return;
                }
                var Employees = this.Employees.map(row => row.employeeCode);
                App.Service.post("/plus/Yqd/Department/Delete", {
                    Employees: Employees
                }).then((res) => {
                    if (res.success) {
                        this.load();
                    }
                });
            },
            updateAvatar() {
                if (this.Employees.length == 0) {
                    App.Msg.error("请选择人员!");
                    return;
                }
                App.Service.post("/plus/Yqd/Department/UpdateAvatar", {
                    EmployeeCode: this.Employees[0].employeeCode
                }).then((res) => {
                    if (res.success) {
                        App.Msg.success("人员头像更新成功！");
                    }
                });
            },
            search(bl) {
                if (bl) this.currentpage = 1;
                this.IsLoad = false;
                App.Service.post("/plus/Yqd/Department/SearchUserList", {
                    start: this.currentpage,
                    limit: this.pagesize,
                    OrganizationCode: this.OrganizationCode,
                    Level: this.level,
                    role: this.searchRole,
                    permit: this.searchPermit,
                    key: this.searchkey,
                    isUpdateUnit: this.updateUnit
                }).then((res) => {
                    if (res.success) {
                        this.totalcount = res.totalcount;
                        this.plist = res.data;
                    }
                });
            },
            pagerclick(currentpage) {
                this.currentpage = currentpage;
                if (this.IsLoad) this.load();
                else this.search();
            },
            sizechange(pagesize) {
                this.currentpage = 1;
                this.pagesize = pagesize;
                if (this.IsLoad) this.load();
                else this.search();
            },
            refresh() {
                App.Service.post("/plus/Yqd/Department/refresh", {
                    OrganizationCode: this.OrganizationCode
                }).then((res) => {
                    if (res.success) {
                        App.Msg.success('刷新成功！');
                        this.load();
                    }
                });
            },
            UpdateUser() {
                if (this.Employees.length == 0) {
                    App.Service.post("/plus/Yqd/Department/UpdateUser", {
                        OrganizationCode: this.OrganizationCode
                    }).then((res) => {
                        if (res.success) {
                            App.Msg.success('更新成功！');
                            //this.$refs.orgTree.updateNode(res.parent);
                            //this.$refs.orgTree.clickNode(res.current);
                            this.load();
                        }
                    });

                    return;
                }
                var Employees = this.Employees.map(row => row.employeeCode);
                App.Service.post("/plus/Yqd/Department/UpdateUser", {
                    Employees: Employees,
                }).then((res) => {
                    if (res.success) {
                        App.Msg.success('更新成功！');
                        //this.$refs.orgTree.updateNode(res.parent);
                        //this.$refs.orgTree.clickNode(res.current);
                        this.load();
                    }
                });
            }
        }
    };
</script>
